.home{
  width: 100%;
  
  .nav-wrapper{
    width: 100%;
    box-shadow: 0 5px 10px #ecececda;

    .navbar{
      width: 1200px;
      height: 90px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
  
      .nav-left{
        height: 100%;
        display: flex;
        align-items: center;
  
        .logo{
          cursor: pointer;
          margin-right: 80px;
        }
  
        .nav-item{
          width: 80px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20px;
  
          &:hover{
            background: #58CE91;
            color: white;
          }
        }
      }
  
      .nav-content{
        width: 320px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #58CE91;
        display: flex;
        justify-content: center;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(88, 206, 145, 0.507);
        
        .search-input, .search-btn{
          outline: none;
          border: none;
          flex: 5;
        }
        .search-btn{
          color: white;
          background-color: #58CE91;
          font-size: 15px;
          cursor: pointer;
        }
        .search-input{
          box-sizing: border-box;
          padding: 0 10px;
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #9997a2;
        }
  
        // .search-input::-webkit-input-placeholder{
        //   font-size: 14px;
        //   color: #9997a2;
        // }
      }
      .nav-right{
        display: flex;
        align-items: center;

        .avatar{
          width: 48px;
          height: 48px;
        }
  
        .user{
          margin-left: 20px;
        }

        .add{
          color: #58CE91; 
          font-size: 36px; 
          margin-right:24px;
          cursor: pointer;
        }
      }
    }
  }
  .bottom{
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 10px;
  }
}